<template>
  <div>
    <el-table-form ref="form" :model="query">
      <el-form-item label="所属机构:">
        <el-tree-select
          v-model="query.orgSNNo"
          clearable
          class="tree-select"
          :popover-width="360"
          :select-params="{
            clearable: true,
            placeholder: '请选择',
            loading: $loadingPlugin.getTreeData,
          }"
          :tree-params="{
            'expand-on-click-node': false,
            'highlight-current': true,
            'filterable': true,
            props: {
              value: 'orgSNNo',
              label: 'orgName',
              disabled: 'disabled',
            },
            data: treeData,
          }"
          @node-click="selectTreeChange"
          @select-clear="clearOrg"
        />
      </el-form-item>
      <el-form-item :table-form-merge="0.2">
        <el-checkbox v-model="query.option" label="包含下级" />
      </el-form-item>
      <el-form-item label="值班年月:">
        <el-date-picker
          v-model="query.yearMonth"
          type="month"
          placeholder="选择月"
        />
      </el-form-item>
      <template v-slot:btns>
        <el-button
          v-permission="[50403,1]"
          type="primary"
          icon="el-icon-search"
          @click="search"
        >查询</el-button>
      </template>
    </el-table-form>
    <lb-table
      ref="lbTable"
      v-loading="$loadingPlugin.fetchData"
      :height="tableHeight"
      border
      element-loading-text="加载中"
      :column="column"
      :data="tableData.data"
      highlight-current-row
      pagination
      :total="tableData.total"
      custom-column
      :immediate-fetch="false"
      @fetch="fetchData"
    />
  </div>
</template>

  <script>
  import { cartSchedulingList } from '@/api'
  import getTreeData from '@/utils/jsonTree'
  import { parseTime } from '@/utils'
  import { mapGetters } from 'vuex'
  export default {
    name: 'subAccount',
    data() {
      return {
        tableHeight: '50',
        query: {
          orgSNNo: '',
          yearMonth: new Date(),
          option: false
        },
        yearMonth: '',
        treeData: [],
        tableData: {
          data: []
        },
        currentRowIndex: '',
        currentcolumnIndex: '',
        showBtn: false
      }
    },
    computed: {
      ...mapGetters(['orgList', 'corpSettingData', 'userInfo']),
      days() {
        return this.getMonthDays(this.yearMonth)
      },
      column() {
        const column = [
          {
            prop: 'orgName',
            label: '站点',
            width: 130,
            fixed: 'left',
            showOverflowTooltip: true
          },
          {
            prop: 'userName',
            label: '绑定司机',
            width: 160,
            fixed: 'left',
            showOverflowTooltip: true,
            render: (h, { row, $index }) => {
              return (
                <div>{ row.cartFlag === 1 ? row.userName + '(大车司机)' : row.cartFlag === 2 ? row.userName + '(配送工)' : row.userName }</div>
              )
            }
          }
        ]
        for (let i = 1; i <= this.days; i++) {
          const columnObj = {
            prop: 'day' + i.toString(),
            label: i.toString(),
            width: 105,
            showOverflowTooltip: true,
            render: (h, { row, $index }) => {
              return (
                <div>
                  <span style='display: block;' class={this.getClass(row, i, 'dutyDriver')}>{ row['day' + i.toString()] ? row['day' + i.toString()].orderReceiver === 1 ? row['day' + i.toString()].dutyDriverUserName : row['day' + i.toString()].orderReceiver === 0 ? row['day' + i.toString()].dutyDriverUserName + '(接单)' : '' : '' } </span>
                  <span style='display: block;' class={this.getClass(row, i, 'dutyEscort')}>{ row['day' + i.toString()] ? row['day' + i.toString()].orderReceiver === 1 ? row['day' + i.toString()].dutyEscortUserName + '(接单)' : row['day' + i.toString()].orderReceiver === 0 ? row['day' + i.toString()].dutyEscortUserName : '' : ''} </span>
                </div>
              )
            }
          }
          column.push(columnObj)
        }
        return column
      }
    },
    async created() {
      this.getTreeData()
      this.search()
      this.getHeight()
      window.addEventListener('resize', this.getHeight)
    },
    methods: {
      getClass(row, i, type) {
        if (type === 'dutyDriver') {
          if (row['day' + i.toString()] && !row['day' + i.toString()].orderReceiver) {
            return 'green'
          }
        }
        if (type === 'dutyEscort') {
          if (row['day' + i.toString()] && row['day' + i.toString()].orderReceiver) {
            return 'green'
          }
        }
      },
      clearOrg() {
        this.query.orgId = ''
        this.query.orgSNNo = ''
      },
      // 选择所属机构
      async selectTreeChange(value) {
        this.query.orgId = value.orgId
        this.query.orgName = value.orgName
      },
      getHeight() {
        this.$nextTick(() => {
          this.tableHeight = document.getElementsByClassName('app-page')[0].offsetHeight - 145 + ''
        })
      },
      // 获取月有多少天
      getMonthDays(date) {
        const d = new Date(date)
        d.setMonth(d.getMonth() + 1)
        d.setDate('1')
        d.setDate(d.getDate() - 1)
        return d.getDate()
      },
      // 获取所属机构数据
      async getTreeData() {
        const data = this.orgList.map((item) => ({
          label: item.name,
          ...item
        }))
        this.treeData = getTreeData(data)
        this.query.orgId = this.userInfo.orgId
        this.query.orgSNNo = this.userInfo.orgSNNo
      },
      async fetchData({ currentPage, pageSize }) {
        const query = {
          orgId: this.query.option ? 0 : this.query.orgId,
          orgSNNo: this.query.orgSNNo,
          schedulingTime: this.query.yearMonth + '-01',
          accountType: 2,
          currentPage,
          pageSize
        }
        const res = await cartSchedulingList(query)
        this.tableData.data = res.data.rows
        this.tableData.total = res.data.total
      },
      search() {
        this.query.yearMonth = parseTime(this.query.yearMonth, '{yy}-{mm}')
        this.yearMonth = this.query.yearMonth
        this.showBtn = false
        if (this.currentNode) {
          this.currentNode.style.background = ''
        }
        this.$nextTick(() => {
          this.$refs.lbTable.fetch({ currentPage: 1 })
          this.$refs.lbTable.doLayout()
        })
      },
      refresh() {
        this.$refs.lbTable.fetch({ currentPage: 1 })
      }
    }
  }
  </script>

  <style lang="scss" scoped>
    /deep/.el-table .el-table__body tr.current-row > td {
      background-color: white !important;
    }
    /deep/.el-table.el-table--striped .el-table__body tr.el-table__row--striped.current-row td,
    .el-table .el-table__body tr.current-row > td {
      background-color: white !important;
    }
    /deep/.green {
      color: #01999F;
    }
    /deep/.not-allow {
      color: #DCDCDC !important;
      cursor: not-allowed;
    }
  </style>

